<template>
  <div id="app" class="app-container">
    <!-- 标题区域 -->
    <div class="header-section">
      <div class="title-container">
        <div class="icon-wrapper">
          <i class="el-icon-lock"></i>
        </div>
        <h1 class="main-title">大声密谋 4.0</h1>
      </div>
      <p class="subtitle">我可以在群里大声蛐蛐老板了！</p>
      <p class="version-info">现已支持ECC椭圆曲线加密</p>
    </div>

    <!-- 自定义设置区域 -->
    <el-card class="custom-settings-card" shadow="always">
      <div slot="header" class="card-header">
        <div class="header-content">
          <i class="el-icon-setting"></i>
          <span>自定义设置</span>
        </div>
        <el-button 
          @click="showCustomSettings = !showCustomSettings" 
          size="small"
          type="text"
        >
          {{ showCustomSettings ? '收起' : '展开' }}
        </el-button>
      </div>
      <el-collapse-transition>
        <div v-show="showCustomSettings" class="settings-content">
          <div class="char-settings">
            <p class="setting-label">密文字符设置（需要3个不同字符）</p>
            <div class="char-inputs">
              <div v-for="(char, index) in customChars" :key="index" class="char-input-group">
                <p class="char-label">字符 {{ index + 1 }}</p>
                <el-input
                  v-model="customChars[index]"
                  :maxlength="1"
                  class="char-input"
                  placeholder="字符"
                ></el-input>
              </div>
            </div>
          </div>

          <div class="separator-setting">
            <el-form-item label="分隔符">
              <el-input
                v-model="customSeparator"
                :maxlength="1"
                placeholder="分隔符"
              ></el-input>
            </el-form-item>
          </div>

          <div class="settings-footer">
            <div class="preview">
              预览: {{ customChars.join('') }} (分隔符: {{ customSeparator }})
            </div>
            <el-button @click="resetToDefault" size="small">
              恢复默认
            </el-button>
          </div>
        </div>
      </el-collapse-transition>
    </el-card>

    <!-- 主要功能区域 -->
    <el-card class="main-card" shadow="always">
      <div slot="header" class="card-header">
        <h3 class="card-title">文本处理</h3>
        <p class="card-description">输入明文或密文，选择对应操作进行加密或解密</p>
      </div>

      <!-- 隐藏的文件输入元素 -->
      <input
        ref="publicKeyFileRef"
        type="file"
        accept=".txt,.pem,.key"
        @change="handleFileUpload($event, 'public')"
        class="hidden-file-input"
      />
      <input
        ref="privateKeyFileRef"
        type="file"
        accept=".txt,.pem,.key"
        @change="handleFileUpload($event, 'private')"
        class="hidden-file-input"
      />

      <!-- 密钥选项 -->
      <div class="key-options">
        <el-checkbox v-model="useKey" class="use-key-checkbox">
          <i class="el-icon-key"></i>
          使用密钥加强安全性
        </el-checkbox>

        <div v-if="useKey" class="key-settings">
          <!-- 密钥模式选择 -->
          <div class="key-mode-selection">
            <p class="setting-label">密钥模式</p>
            <el-radio-group v-model="keyMode">
              <el-radio label="symmetric">对称加密</el-radio>
              <el-radio label="asymmetric">ECC 加密</el-radio>
            </el-radio-group>
          </div>

          <!-- 对称加密密钥输入 -->
          <div v-if="keyMode === 'symmetric'" class="symmetric-key">
            <el-form-item label="密钥">
              <el-input
                v-model="encryptionKey"
                :type="showKey ? 'text' : 'password'"
                placeholder="请输入密钥（双方必须使用相同密钥）"
                class="key-input"
              >
                <i 
                  slot="suffix" 
                  :class="showKey ? 'el-icon-close' : 'el-icon-view'" 
                  @click="showKey = !showKey"
                  class="password-toggle"
                ></i>
              </el-input>
            </el-form-item>
            <p class="key-length">密钥长度: {{ encryptionKey.length }} 字符</p>
          </div>

          <!-- ECC加密密钥管理 -->
          <div v-if="keyMode === 'asymmetric'" class="ecc-settings">
            <!-- 密钥对生成 -->
            <div class="key-pair-generation">
              <div class="generation-header">
                <p class="setting-label">ECC密钥对生成</p>
                <el-button 
                  @click="generateECCKeyPair" 
                  size="small"
                  class="generate-btn"
                >
                  <i class="el-icon-refresh"></i>
                  生成新密钥对
                </el-button>
              </div>
              
              <div v-if="generatedKeyPair.publicKey" class="generated-keys">
                <div class="key-warning">
                  <p class="warning-text">请将公钥分享给您的朋友进行加密</p>
                  <p class="danger-text">⚠ 请务必谨慎保管您的私钥，防止密文被其他人解析！ ⚠</p>
                </div>
                
                <div class="key-display">
                  <div class="key-item">
                    <div class="key-header">
                      <span class="key-label">公钥 (secp256k1)</span>
                      <div class="key-actions">
                        <el-button 
                          @click="copyKeyToClipboard(generatedKeyPair.publicKey, '公钥')" 
                          size="mini"
                        >
                          <i class="el-icon-document-copy"></i>
                          复制
                        </el-button>
                        <el-button 
                          @click="downloadKey(generatedKeyPair.publicKey, 'ecc_public_key.txt')" 
                          size="mini"
                        >
                          <i class="el-icon-download"></i>
                          下载
                        </el-button>
                      </div>
                    </div>
                    <el-input
                      type="textarea"
                      :rows="3"
                      v-model="generatedKeyPair.publicKey"
                      readonly
                      class="key-textarea"
                    ></el-input>
                  </div>
                  
                  <div class="key-item">
                    <div class="key-header">
                      <span class="key-label">私钥 (secp256k1)</span>
                      <div class="key-actions">
                        <el-button 
                          @click="copyKeyToClipboard(generatedKeyPair.privateKey, '私钥')" 
                          size="mini"
                        >
                          <i class="el-icon-document-copy"></i>
                          复制
                        </el-button>
                        <el-button 
                          @click="downloadKey(generatedKeyPair.privateKey, 'ecc_private_key.txt')" 
                          size="mini"
                        >
                          <i class="el-icon-download"></i>
                          下载
                        </el-button>
                      </div>
                    </div>
                    <el-input
                      type="textarea"
                      :rows="2"
                      v-model="generatedKeyPair.privateKey"
                      readonly
                      class="key-textarea"
                    ></el-input>
                  </div>
                </div>
              </div>
            </div>

            <!-- 公钥输入（用于加密） -->
            <div class="key-input-section">
              <div class="key-input-header">
                <span class="key-input-label">公钥（用于加密）</span>
                <div class="key-input-actions">
                  <el-button 
                    @click="triggerFileUpload('public')" 
                    size="small"
                  >
                    <i class="el-icon-upload"></i>
                    上传文件
                  </el-button>
                  <el-button
                    v-if="generatedKeyPair.publicKey"
                    @click="setPublicKey(generatedKeyPair.publicKey)"
                    size="small"
                  >
                    使用生成的公钥
                  </el-button>
                </div>
              </div>
              <el-input
                type="textarea"
                :rows="4"
                v-model="publicKey"
                placeholder="请输入或上传ECC公钥..."
                class="key-textarea"
              ></el-input>
              <p v-if="publicKey" class="key-validation">
                {{ ECCCrypto.isValidPublicKey(publicKey) ? 
                  '✓ 公钥格式正确' : 
                  '✗ 公钥格式错误' 
                }}
              </p>
            </div>

            <!-- 私钥输入（用于解密） -->
            <div class="key-input-section">
              <div class="key-input-header">
                <span class="key-input-label">私钥（用于解密）</span>
                <div class="key-input-actions">
                  <el-button 
                    @click="triggerFileUpload('private')" 
                    size="small"
                  >
                    <i class="el-icon-upload"></i>
                    上传文件
                  </el-button>
                  <el-button
                    v-if="generatedKeyPair.privateKey"
                    @click="setPrivateKey(generatedKeyPair.privateKey)"
                    size="small"
                  >
                    使用生成的私钥
                  </el-button>
                </div>
              </div>
              <el-input
                type="textarea"
                :rows="4"
                v-model="privateKey"
                placeholder="请输入或上传ECC私钥..."
                class="key-textarea"
              ></el-input>
              <p v-if="privateKey" class="key-validation">
                {{ ECCCrypto.isValidPrivateKey(privateKey) ? 
                  '✓ 私钥格式正确' : 
                  '✗ 私钥格式错误' 
                }}
              </p>
            </div>
          </div>
        </div>
      </div>

      <!-- 输入区域 -->
      <div class="input-section">
        <el-form-item label="输入内容">
          <el-input
            type="textarea"
            :rows="6"
            v-model="inputText"
            placeholder="请输入要处理的文本..."
            class="input-textarea"
          ></el-input>
        </el-form-item>
        <p class="char-count">字符数: {{ inputText.length }}</p>
      </div>

      <!-- 操作按钮 -->
      <div class="action-buttons">
        <el-button
          @click="handleEncrypt"
          :disabled="!inputText || (useKey && keyMode === 'symmetric' && !encryptionKey.trim()) || (useKey && keyMode === 'asymmetric' && !publicKey.trim())"
          type="success"
          class="action-btn"
        >
          加密
        </el-button>
        <el-button
          @click="handleDecrypt"
          :disabled="!inputText || (useKey && keyMode === 'symmetric' && !encryptionKey.trim()) || (useKey && keyMode === 'asymmetric' && !privateKey.trim())"
          type="primary"
          class="action-btn"
        >
          解密
        </el-button>
      </div>

      <!-- 输出区域 -->
      <div v-if="outputText" class="output-section">
        <div class="output-header">
          <span class="output-label">处理结果</span>
          <el-button
            @click="copyToClipboard"
            type="text"
            class="copy-btn"
          >
            <i v-if="copySuccess" class="el-icon-success success-icon"></i>
            <i v-else class="el-icon-document-copy"></i>
            {{ copySuccess ? '已复制' : '复制' }}
          </el-button>
        </div>
        <el-input
          type="textarea"
          :rows="6"
          v-model="outputText"
          readonly
          class="output-textarea"
        ></el-input>
        <p class="char-count">字符数: {{ outputText.length }}</p>
      </div>
    </el-card>

    <!-- 说明区域 -->
    <el-card class="instructions-card" shadow="always">
      <div slot="header" class="card-header">
        <h3 class="card-title">使用说明</h3>
      </div>
      <div class="instructions-content">
        <div class="instruction-item">
          <div class="instruction-bullet green"></div>
          <div class="instruction-text">
            <strong>加密：</strong>将普通文本转换为由自定义字符组成的密文，使用自定义分隔符连接
          </div>
        </div>
        <div class="instruction-item">
          <div class="instruction-bullet blue"></div>
          <div class="instruction-text">
            <strong>解密：</strong>将自定义密文还原为原始文本内容
          </div>
        </div>
        <div class="instruction-item">
          <div class="instruction-bullet purple"></div>
          <div class="instruction-text">
            <strong>对称加密：</strong>使用相同密钥进行加密和解密，双方必须共享同一密钥
          </div>
        </div>
        <div class="instruction-item">
          <div class="instruction-bullet orange"></div>
          <div class="instruction-text">
            <strong>ECC 加密：</strong>使用secp256k1曲线，公钥加密，私钥解密。安全性更高，密钥更短
          </div>
        </div>
        <div class="instruction-item">
          <div class="instruction-bullet pink"></div>
          <div class="instruction-text">
            <strong>自定义设置：</strong>可以自定义密文字符和分隔符，让加密更个性化
          </div>
        </div>
        <div class="instruction-item">
          <div class="instruction-bullet red"></div>
          <div class="instruction-text">
            <strong>特点：</strong>支持中英文混合文本，采用可逆加密算法，确保信息无损失
          </div>
        </div>
      </div>
    </el-card>

  </div>
</template>

<script>
import { ec as EC } from 'elliptic';
// 模拟 ECC 加密库
const ECCCrypto = {
  generateKeyPair: () => {
    // 模拟生成密钥对
    return {
      publicKey: '-----BEGIN PUBLIC KEY-----\nMFYwEAYHKoZIzj0CAQYFK4EEAAoDQgAE' + 
                Math.random().toString(36).substring(2, 15) + 
                '\n-----END PUBLIC KEY-----',
      privateKey: '-----BEGIN PRIVATE KEY-----\nMIGEAgEAMBAGByqGSM49AgEGBSuBBAAKBG0wawIBAQQg' + 
                  Math.random().toString(36).substring(2, 15) + 
                  '\n-----END PRIVATE KEY-----'
    };
  },
  isValidPublicKey: (key) => {
    return key && key.includes('BEGIN PUBLIC KEY');
  },
  isValidPrivateKey: (key) => {
    return key && key.includes('BEGIN PRIVATE KEY');
  },
  encrypt: (text, publicKey) => {
    // 模拟加密
    return btoa(text) + '|' + publicKey.substring(0, 10);
  },
  decrypt: (text, privateKey) => {
    // 模拟解密
    const parts = text.split('|');
    if (parts.length === 2) {
      return atob(parts[0]);
    }
    return '解密失败';
  }
};

export default {
  name: 'App',
  data() {
    return {
      inputText: '',
      outputText: '',
      copySuccess: false,
      useKey: false,
      encryptionKey: '',
      showKey: false,
      showCustomSettings: false,
      
      // ECC相关状态
      keyMode: 'symmetric', // 'symmetric' | 'asymmetric'
      publicKey: '',
      privateKey: '',
      generatedKeyPair: { publicKey: '', privateKey: '' },
      
      // 自定义密文字符和分隔符
      customChars: ['玛', '卡', '巴'],
      customSeparator: '咔',
      
      // ECC 加密库
      ECCCrypto
    };
  },
  methods: {
    // 生成密钥哈希
    generateKeyHash(key) {
      let hash = 0;
      for (let i = 0; i < key.length; i++) {
        const char = key.charCodeAt(i);
        hash = ((hash << 5) - hash) + char;
        hash = hash & hash; // 转换为32位整数
      }
      return Math.abs(hash);
    },

    // 生成ECC密钥对
    generateECCKeyPair() {
      try {
        const keyPair = ECCCrypto.generateKeyPair();
        this.generatedKeyPair = keyPair;
      } catch (error) {
        this.$message.error('生成密钥对失败: ' + error.message);
      }
    },

    // 加密算法：将字符转换为自定义字符组合
    encrypt(text, key) {
      if (!text) return '';
      
      // 如果使用ECC加密
      if (this.useKey && this.keyMode === 'asymmetric') {
        if (!this.publicKey.trim()) {
          throw new Error('请输入公钥');
        }
        
        if (!ECCCrypto.isValidPublicKey(this.publicKey)) {
          throw new Error('公钥格式错误');
        }
        
        const eccEncrypted = ECCCrypto.encrypt(text, this.publicKey);
        // 将ECC加密结果再用自定义字符编码
        return this.encryptWithCustomChars(eccEncrypted);
      }
      
      // 原有的对称加密逻辑
      const chars = this.customChars;
      let result = '';
      let keyOffset = 0;
      
      if (this.useKey && key && this.keyMode === 'symmetric') {
        keyOffset = this.generateKeyHash(key) % 1000; // 使用密钥生成偏移量
      }
      
      for (let i = 0; i < text.length; i++) {
        let charCode = text.charCodeAt(i);
        
        // 如果使用密钥，对字符编码进行偏移
        if (this.useKey && key && this.keyMode === 'symmetric') {
          charCode = (charCode + keyOffset + i) % 65536; // 防止溢出
        }
        
        // 将字符编码转换为三进制表示
        let ternary = charCode.toString(3);
        
        // 确保至少有3位数字，不足的前面补0
        while (ternary.length < 3) {
          ternary = '0' + ternary;
        }
        
        // 将三进制数字转换为对应的字符
        let charGroup = '';
        for (let j = 0; j < ternary.length; j++) {
          const digit = parseInt(ternary[j]);
          charGroup += chars[digit];
        }
        
        // 用自定义分隔符分隔每个字符组
        if (i > 0) result += this.customSeparator;
        result += charGroup;
      }
      
      return result;
    },

    // 使用自定义字符编码
    encryptWithCustomChars(text) {
      const chars = this.customChars;
      let result = '';
      
      for (let i = 0; i < text.length; i++) {
        const charCode = text.charCodeAt(i);
        
        // 将字符编码转换为三进制表示
        let ternary = charCode.toString(3);
        
        // 确保至少有3位数字，不足的前面补0
        while (ternary.length < 3) {
          ternary = '0' + ternary;
        }
        
        // 将三进制数字转换为对应的字符
        let charGroup = '';
        for (let j = 0; j < ternary.length; j++) {
          const digit = parseInt(ternary[j]);
          charGroup += chars[digit];
        }
        
        // 用自定义分隔符分隔每个字符组
        if (i > 0) result += this.customSeparator;
        result += charGroup;
      }
      
      return result;
    },

    // 解密算法：将自定义字符组合还原为原文
    decrypt(text, key) {
      if (!text) return '';
      
      // 检查是否包含ECC加密标识符（包含'|'分隔符）
      const isECCEncrypted = this.useKey && this.keyMode === 'asymmetric';
      
      if (isECCEncrypted) {
        // ECC解密流程
        if (!this.privateKey.trim()) {
          throw new Error('请输入私钥');
        }
        
        if (!ECCCrypto.isValidPrivateKey(this.privateKey)) {
          throw new Error('私钥格式错误');
        }
        
        // 先将自定义字符解码
        const decodedText = this.decryptWithCustomChars(text);
        
        // 然后进行ECC解密
        return ECCCrypto.decrypt(decodedText, this.privateKey);
      } else {
        // 对称加密或无密钥解密
        return this.decryptSymmetric(text, key);
      }
    },

    // 使用自定义字符解码
    decryptWithCustomChars(text) {
      const chars = this.customChars;
      const charGroups = text.split(this.customSeparator);
      let result = '';
      
      for (const group of charGroups) {
        if (!group) continue;
        
        let ternary = '';
        for (let i = 0; i < group.length; i++) {
          const char = group[i];
          const index = chars.indexOf(char);
          if (index === -1) {
            // 如果遇到不是自定义字符的字符，跳过
            continue;
          }
          ternary += index.toString();
        }
        
        if (ternary) {
          // 将三进制转换为十进制
          const charCode = parseInt(ternary, 3);
          if (charCode > 0) {
            result += String.fromCharCode(charCode);
          }
        }
      }
      
      return result;
    },

    // 对称解密
    decryptSymmetric(text, key) {
      const chars = this.customChars;
      const charGroups = text.split(this.customSeparator);
      let result = '';
      let keyOffset = 0;
      
      // 只有在启用密钥且为对称加密模式时才使用密钥偏移
      if (this.useKey && key && this.keyMode === 'symmetric') {
        keyOffset = this.generateKeyHash(key) % 1000; // 使用密钥生成偏移量
      }
      
      for (let groupIndex = 0; groupIndex < charGroups.length; groupIndex++) {
        const group = charGroups[groupIndex];
        if (!group) continue;
        
        let ternary = '';
        for (let i = 0; i < group.length; i++) {
          const char = group[i];
          const index = chars.indexOf(char);
          if (index === -1) {
            // 如果遇到不是自定义字符的字符，跳过
            continue;
          }
          ternary += index.toString();
        }
        
        if (ternary) {
          // 将三进制转换为十进制
          let charCode = parseInt(ternary, 3);
          
          // 只有在启用密钥且为对称加密模式时才进行反向偏移
          if (this.useKey && key && this.keyMode === 'symmetric') {
            charCode = (charCode - keyOffset - groupIndex + 65536) % 65536; // 防止负数
          }
          
          if (charCode > 0) {
            result += String.fromCharCode(charCode);
          }
        }
      }
      
      return result;
    },

    // 处理加密
    handleEncrypt() {
      try {
        if (this.useKey) {
          if (this.keyMode === 'symmetric' && !this.encryptionKey.trim()) {
            this.$message.warning('请输入密钥');
            return;
          }
          if (this.keyMode === 'asymmetric' && !this.publicKey.trim()) {
            this.$message.warning('请输入公钥');
            return;
          }
        }
        
        const result = this.encrypt(
          this.inputText, 
          this.useKey && this.keyMode === 'symmetric' ? this.encryptionKey : undefined
        );
        this.outputText = result;
      } catch (error) {
        this.$message.error(error.message || '加密失败');
      }
    },

    // 处理解密
    handleDecrypt() {
      try {
        if (this.useKey) {
          if (this.keyMode === 'symmetric' && !this.encryptionKey.trim()) {
            this.$message.warning('请输入密钥');
            return;
          }
          if (this.keyMode === 'asymmetric' && !this.privateKey.trim()) {
            this.$message.warning('请输入私钥');
            return;
          }
        }
        
        const result = this.decrypt(
          this.inputText, 
          this.useKey && this.keyMode === 'symmetric' ? this.encryptionKey : undefined
        );
        this.outputText = result;
      } catch (error) {
        this.$message.error(error.message || '解密失败');
      }
    },

    // 复制到剪贴板
    copyToClipboard() {
      if (!this.outputText) return;
      
      try {
        const textarea = document.createElement('textarea');
        textarea.value = this.outputText;
        document.body.appendChild(textarea);
        textarea.select();
        document.execCommand('copy');
        document.body.removeChild(textarea);
        
        this.copySuccess = true;
        setTimeout(() => {
          this.copySuccess = false;
        }, 2000);
      } catch (err) {
        console.error('复制失败:', err);
        this.$message.error('复制失败');
      }
    },

    // 复制密钥到剪贴板
    copyKeyToClipboard(keyText, keyType) {
      try {
        const textarea = document.createElement('textarea');
        textarea.value = keyText;
        document.body.appendChild(textarea);
        textarea.select();
        document.execCommand('copy');
        document.body.removeChild(textarea);
        
        this.$message.success(`${keyType}已复制到剪贴板`);
      } catch (err) {
        console.error('复制失败:', err);
        this.$message.error('复制失败');
      }
    },

    // 重置为默认设置
    resetToDefault() {
      this.customChars = ['玛', '卡', '巴'];
      this.customSeparator = '咔';
    },

    // 更新自定义字符
    updateCustomChar(index, value) {
      const newChars = [...this.customChars];
      newChars[index] = value;
      this.customChars = newChars;
    },

    // 处理文件上传
    handleFileUpload(event, keyType) {
      const file = event.target.files?.[0];
      if (!file) return;

      const reader = new FileReader();
      reader.onload = (e) => {
        const content = e.target?.result;
        if (keyType === 'public') {
          this.publicKey = content.trim();
        } else {
          this.privateKey = content.trim();
        }
      };
      reader.readAsText(file);
    },

    // 触发文件上传
    triggerFileUpload(keyType) {
      if (keyType === 'public') {
        this.$refs.publicKeyFileRef.click();
      } else {
        this.$refs.privateKeyFileRef.click();
      }
    },

    // 下载密钥文件
    downloadKey(keyContent, filename) {
      const blob = new Blob([keyContent], { type: 'text/plain' });
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = filename;
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
      URL.revokeObjectURL(url);
    },

    // 设置公钥
    setPublicKey(key) {
      this.publicKey = key;
    },

    // 设置私钥
    setPrivateKey(key) {
      this.privateKey = key;
    }
  }
};
</script>

<style scoped>
.app-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #f0f9ff 0%, #e6f3ff 50%, #f0ebff 100%);
  padding: 20px;
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif;
}

/* 标题区域 */
.header-section {
  text-align: center;
  padding: 40px 0;
}

.title-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin-bottom: 15px;
}

.icon-wrapper {
  padding: 12px;
  background: linear-gradient(135deg, #409EFF, #6750F5);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-wrapper i {
  font-size: 24px;
  color: white;
}

.main-title {
  font-size: 36px;
  font-weight: bold;
  background: linear-gradient(135deg, #409EFF, #6750F5);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0;
}

.subtitle {
  font-size: 18px;
  color: #606266;
  margin: 10px 0 5px;
}

.version-info {
  font-size: 14px;
  color: #909399;
}

/* 卡片通用样式 */
.custom-settings-card,
.main-card,
.instructions-card {
  margin-bottom: 20px;
  border: none;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid #ebeef5;
}

.header-content {
  display: flex;
  align-items: center;
  gap: 8px;
}

.card-title {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
  margin: 0;
  text-align: center;
}

.card-description {
  color: #909399;
  margin: 5px 0 0;
  text-align: center;
}

/* 自定义设置区域 */
.settings-content {
  padding: 20px;
}

.setting-label {
  font-size: 14px;
  font-weight: 500;
  color: #606266;
  margin-bottom: 15px;
}

.char-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 15px;
  margin-bottom: 20px;
}

.char-input-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.char-label {
  font-size: 12px;
  color: #909399;
  margin: 0;
}

.char-input {
  text-align: center;
}

.separator-setting {
  margin-bottom: 20px;
}

.settings-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 15px;
  border-top: 1px solid #ebeef5;
}

.preview {
  font-size: 14px;
  color: #606266;
}

/* 密钥选项 */
.key-options {
  margin-bottom: 20px;
}

.use-key-checkbox {
  margin-bottom: 15px;
}

.key-settings {
  padding: 15px;
  border: 1px solid #ebeef5;
  border-radius: 8px;
  background-color: #fafafa;
}

.key-mode-selection {
  margin-bottom: 15px;
}

.symmetric-key {
  margin-top: 15px;
}

.key-input {
  margin-bottom: 5px;
}

.password-toggle {
  cursor: pointer;
  color: #909399;
}

.key-length {
  font-size: 12px;
  color: #909399;
  margin: 5px 0 0;
}

/* ECC设置 */
.ecc-settings {
  margin-top: 15px;
}

.key-pair-generation {
  padding: 15px;
  background-color: #ecf5ff;
  border-radius: 8px;
  margin-bottom: 20px;
}

.generation-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.generate-btn {
  display: flex;
  align-items: center;
  gap: 5px;
}

.generated-keys {
  margin-top: 15px;
}

.key-warning {
  margin-bottom: 15px;
}

.warning-text {
  color: #409EFF;
  font-size: 14px;
  margin: 5px 0;
}

.danger-text {
  color: #F56C6C;
  font-size: 14px;
  font-weight: 500;
  margin: 5px 0;
}

.key-display {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.key-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.key-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.key-label {
  font-size: 12px;
  color: #909399;
}

.key-actions {
  display: flex;
  gap: 8px;
}

.key-textarea {
  font-family: monospace;
  font-size: 12px;
}

.key-input-section {
  margin-bottom: 20px;
}

.key-input-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.key-input-label {
  font-size: 14px;
  font-weight: 500;
  color: #606266;
}

.key-input-actions {
  display: flex;
  gap: 8px;
}

.key-validation {
  font-size: 12px;
  margin: 5px 0 0;
}

/* 输入输出区域 */
.input-section,
.output-section {
  margin-bottom: 20px;
}

.input-textarea,
.output-textarea {
  font-family: inherit;
}

.char-count {
  font-size: 12px;
  color: #909399;
  text-align: right;
  margin: 5px 0 0;
}

/* 操作按钮 */
.action-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 25px 0;
}

.action-btn {
  padding: 12px 30px;
  font-size: 16px;
  border-radius: 6px;
}

/* 输出区域 */
.output-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.output-label {
  font-size: 14px;
  font-weight: 500;
  color: #606266;
}

.copy-btn {
  display: flex;
  align-items: center;
  gap: 5px;
}

.success-icon {
  color: #67C23A;
}

/* 说明区域 */
.instructions-content {
  padding: 0 5px;
}

.instruction-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 15px;
}

.instruction-bullet {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 6px;
  flex-shrink: 0;
}

.instruction-bullet.green {
  background-color: #67C23A;
}

.instruction-bullet.blue {
  background-color: #409EFF;
}

.instruction-bullet.purple {
  background-color: #6750F5;
}

.instruction-bullet.orange {
  background-color: #E6A23C;
}

.instruction-bullet.pink {
  background-color: #F56C6C;
}

.instruction-bullet.red {
  background-color: #F56C6C;
}

.instruction-text {
  flex: 1;
  font-size: 14px;
  line-height: 1.5;
  color: #606266;
}

/* 页脚 */
.footer {
  text-align: center;
  padding: 20px 0;
}

.footer-text {
  color: #909399;
  font-size: 14px;
}

/* 隐藏的文件输入 */
.hidden-file-input {
  display: none;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .app-container {
    padding: 10px;
  }
  
  .main-title {
    font-size: 28px;
  }
  
  .char-inputs {
    grid-template-columns: 1fr;
  }
  
  .action-buttons {
    flex-direction: column;
    gap: 10px;
  }
  
  .action-btn {
    width: 100%;
  }
  
  .key-input-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  
  .key-input-actions {
    width: 100%;
    justify-content: flex-end;
  }
}
</style>